<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件单元格一般用于一组列表的情况，比如个人中心页，设置页等。
		</demo-desc>
		
		<fu-section title="基本案例" customClass="fu-m-t-20" type="line">
			<fu-cell-group :customClass="'fu-bg-FFFFFF'">
				<fu-cell title="fusions UI" value="内容" :isLink="true"></fu-cell>
				<fu-cell title="万人迷,一统江湖" value="内容" desc="挣脱束缚,向往自由"></fu-cell>
			</fu-cell-group>
		</fu-section>
		
		<fu-section title="自定义图标/图片" customClass="fu-m-t-20" type="line"></fu-section>
		<fu-cell-group :customClass="'fu-bg-FFFFFF'">
			<fu-cell title="单元格" icon="help" iconSize="20"></fu-cell>
			<fu-cell title="单元格">
				<fu-image width="20" height="20" slot="icon"></fu-image>
			</fu-cell>
		</fu-cell-group>
		
		<fu-section title="自定义大小" customClass="fu-m-t-20" type="line"></fu-section>
		<fu-cell-group :customClass="'fu-bg-FFFFFF'">
			<fu-cell size="large" title="单元格" value="内容" isLink></fu-cell>
			<fu-cell size="large" title="单元格" value="内容" desc="描述信息"></fu-cell>
		</fu-cell-group>
		
		<fu-section title="显示箭头" customClass="fu-m-t-20" type="line"></fu-section>
		<fu-cell-group :customClass="'fu-bg-FFFFFF'">
			<fu-cell title="单元格" value="组件" isLink></fu-cell>
			<fu-cell title="单元格" value="模板" arrow-direction="down" isLink></fu-cell>
		</fu-cell-group>
		
		<fu-section title="跳转页面" customClass="fu-m-t-20" type="line"></fu-section>
		<fu-cell-group :customClass="'fu-bg-FFFFFF'">
			<fu-cell title="打开标签页" isLink></fu-cell>
			<fu-cell title="打开徽标页" isLink></fu-cell>
		</fu-cell-group>
		
		<fu-section title="右侧内容垂直居中" customClass="fu-m-t-20" type="line"></fu-section>
		<fu-cell-group :customClass="'fu-bg-FFFFFF'">
			<fu-cell title="单元格" value="内容" desc="描述信息" center ></fu-cell>
		</fu-cell-group>
		
		<fu-section title="自定义插槽" customClass="fu-m-t-20" type="line"></fu-section>
		<fu-cell-group :customClass="'fu-bg-FFFFFF'">
			<fu-cell value="内容">
				<template v-slot:title>
					<view class="fu-flex fu-flex-column-center">
						<text class="fu-m-r-10">单元格</text>
						<fu-tag>标签</fu-tag>
					</view>
				</template>
			</fu-cell>
			<fu-cell title="单元格" isLink>
				<template v-slot:value>
					<fu-badge value="99"></fu-badge>
				</template>
			</fu-cell>
		</fu-cell-group>
	</view>
</template>

<script setup>
 
</script>

<style lang="scss">
	page {
		background-color: $bg-color;
	}
</style>